<script setup lang="ts">
let { proList } = defineProps(['proList'])
import { getdetailFn } from '@/api/sort'
import { useRouter } from 'vue-router';
const router = useRouter()
import { ref } from 'vue'
import type { Ref } from 'vue'
const detailList: Ref<Array<string>> = ref([])

function gridClick(proid: string) {
  //写详情页面接口
  getdetailFn({ proid: proid }).then(res => {
    console.log(4, res.data);
    detailList.value = res.data
    console.log(8, detailList.value);
    localStorage.setItem('proid', res.data.proid)
    router.push({
      path: '/detail/' + res.data.proid,
      query: { proid: res.data.proid },

      /**
        路由传参方法一：params
        1. 在路由的配置中 path: '/detail/:proid' 先在配置中添加 :proid
        2. 跳转页面的时候携带拼接参数 router.push('/detail/' + proid)
        3. 在进入的页面先导入 useRoute 进行接收
        4. const route = useRoute()
        5. console.log(route.params.proid)


        路由传参方法二：query
        1. 通过 router.push({ query: {} }) 传递query对象进行多参数传递
        2. 在进入的页面先导入 useRoute 进行接收
        3. const route = useRoute()
        4. console.log(route.query.proid)
       */
    })
  })
}
</script>
<template>
  <div>
    <div class="proCard">
      <section v-for="item in proList" :key="item.proid" @click="gridClick(item.proid)" :detailList="detailList">
        <div class="itemImg">
          <img :src="item.img1" alt="">
        </div>
        <div class="itemDes">

          <p class="item-proname van-multi-ellipsis--l2">{{ item.proname }}</p>

          <p class="red"> 价格:￥{{ (item.originprice * item.discount * 0.1).toFixed(2) }} </p>
        </div>
      </section>
    </div>
  </div>
</template>
<style lang="scss">
.proCard {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  // height: 2rem;

  section {
    width: 48vw;
    height: 2.6rem;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    box-sizing: border-box;
    background-color: #f4f3f3;
    // align-items: center;
    margin-bottom: 5px;

    .itemImg {
      height: 1.8rem;
      width: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .itemDes {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 5px;

      .item-proname {
        height: 0.4rem;
        line-height: 0.2rem;
        overflow: hidden;
      }

      .red {
        color: red;
      }
    }

  }
}
</style>